<template>
  <div>
    <!--高级查询-->
    <el-form :model="searchForm"  ref="userAddForm" :inline="true" >
      <el-form-item>
        <el-input placeholder="搜索姓名" v-model="searchForm.keyword" size="medium" prefix-icon="el-icon-search" clearable>
        </el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch"  size="medium">搜索</el-button>

      <el-button type="primary" icon="el-icon-plus" @click="handleAdd"  size="medium">新增用户</el-button>
    </el-form>

    <el-table :data="TData" border style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <p>电话: {{ scope.row.phone }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
      <el-table-column prop="createTime" label="出生日期" width="150"></el-table-column>
      <el-table-column prop="address" label="地址" width="250"></el-table-column>
      <el-table-column prop="email" label="电子邮件" width="200"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button icon="el-icon-delete" @click="handleDel(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <div class="block">
      <el-pagination
        align="right"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="total">
      </el-pagination>
    </div>
    <el-button style="float: left;margin: 20px"
               icon="el-icon-delete"
               @click="handleBatchRemove"
               type="danger" size="medium">批量删除
    </el-button>

    <!--  新增、编辑-->
    <el-dialog :title="title" :visible.sync="addOrEditForm" >
      <el-form :model="users" label-width="100px" >
        <el-form-item label="姓名" >
          <el-input v-model="users.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input v-model="users.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" >
          <el-input v-model="users.createTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" >
          <el-input v-model="users.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" >
          <el-input v-model="users.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrEditForm = false">取 消</el-button>
        <el-button type="primary" @click="handlerSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      addOrEditForm:false,//关闭编辑框
      users:{
        id:null,
        name:'',
        phone:'',
        address:'',
        email:'',
        createTime:''
      },
      searchForm:{
        keyword:""
      },
      TData:null,
      currentPage:1,
      pageSize:10,
      pageSizes:[10,20,30,40,50],
      total:0,
      parameter:null,
      title:""
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getUsers(this.currentPage,this.pageSize);
    },
    getUsers(page,size){
      this.$http.get("/user/list",this.parameter).then(res =>{
        this.parameter = {
          currentPage:page,
          pageSize:size
        }
        console.log(res);
        this.TData = res.data.rows;
        this.total = res.data.total;
      })
    },
    handleDel(val){
      this.$confirm('确认删除该记录吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
        this.$http.delete("/user/delete",{id:val.id}).then(res =>{
          console.log(res)
          if(res.data.message){
            //刷新列表
            this.getUsers(this.currentPage,this.pageSize);
            this.$message({
              message: res.data.message,
              type:'success'
            })
          }
        })
      }).catch(() => {
      });

    },
    //批量删除
    handleBatchRemove(){

    },
    //修改
    handleEdit(row){
      this.title = "修改用户";
      console.log(row)
      this.users = JSON.parse(JSON.stringify(row));
      this.addOrEditForm = true;//显示对话框


    },
    //添加
    handleAdd(){
      this.title = "新增用户"
      this.addOrEditForm = true;
      this.users = {
        id:null,
        name:'',
        phone:'',
        address:'',
        email:'',
        createTime:''
      };
    },
    //高级查询
    handleSearch() {
      this.currentPage = 1;
      this.getUsers();
    },
    //提交
    handlerSubmit(){
      let users = this.users;
      this.$confirm('确认保存吗?', '提示', {}).then(() => {
        if(users.id){
          this.$http.put("/user/update",this.users).then(res =>{
            //正确提交，关闭对话框
            this.addOrEditForm = false;
            //刷新列表
            this.getUsers(this.currentPage,this.pageSize);
            this.$message({
              message: res.data.message,
              type:'success'
            })
          })
        }else{
          this.$http.post("/user/add",this.users).then(res =>{
            //正确提交，关闭对话框
            this.addOrEditForm = false;
            this.getUsers(this.currentPage,this.pageSize);
            this.$message({
              message: res.data.message,
              type:'success'
            })
          })
          }
      }).catch(() => {
      });
    }
  },
  mounted() {
    this.getUsers();
  }
}
</script>

<style scoped>

</style>
